<template>
  <div id='Signs' class="clearfix" >
    <div :class="['SignsInfo',{'animal-heat': $store.getters.signsData.Temperature >= 35.4 && $store.getters.signsData.Temperature <= 38.5,'respiratory-rate': $store.getters.signsData.Temperature < 35.4 ,'pulse-rate': $store.getters.signsData.Temperature>38.5 }]" @click="routerLink($event)" data-name="体温" v-if="$store.getters.signsData.Temperature != null">
      <div class="Signs-header">
        体温
      </div>
      <div class="Signs-content">
        <span>{{ $store.getters.signsData.Temperature}}</span> <span v-if=" $store.getters.signsData.Temperature < 35.4">↓</span><span v-if="$store.getters.signsData.Temperature > 38.5">↑</span>
      </div>
    </div>
    <div :class="['SignsInfo',{'animal-heat': $store.getters.signsData.SponRate >= 20 && $store.getters.signsData.SponRate <= 50,'respiratory-rate': $store.getters.signsData.SponRate < 20 ,'pulse-rate': $store.getters.signsData.SponRate >50 }]" @click="routerLink($event)" data-name="自主呼吸频率" v-if="$store.getters.signsData.SponRate != null">
      <div class="Signs-header">
        自主呼吸频率
      </div>
      <div class="Signs-content">
        <span>{{ $store.getters.signsData.SponRate}}</span> <span v-if=" $store.getters.signsData.SponRate < 20">↓</span><span v-if="$store.getters.signsData.SponRate > 50">↑</span>
      </div>
    </div>
    <div :class="['SignsInfo',{'animal-heat': $store.getters.signsData.HeartRate >= 40 && $store.getters.signsData.HeartRate <= 130,'respiratory-rate': $store.getters.signsData.HeartRate < 40 ,'pulse-rate': $store.getters.signsData.HeartRate >130 }]" @click="routerLink($event)" data-name="心率" v-if="$store.getters.signsData.HeartRate != null">
      <div class="Signs-header">
        心率
      </div>
      <div class="Signs-content">
        <span>{{ $store.getters.signsData.HeartRate}}</span> <span v-if=" $store.getters.signsData.HeartRate < 40">↓</span><span v-if="$store.getters.signsData.SponRate > 130">↑</span>
      </div>
    </div>
    <div :class="['SignsInfo',{'animal-heat':$store.getters.signsData.Pulse >= 50 && $store.getters.signsData.Pulse <= 130,'respiratory-rate': $store.getters.signsData.Pulse < 50 ,'pulse-rate': $store.getters.signsData.Pulse >130 }]" @click="routerLink($event)" data-name="脉搏" v-if="$store.getters.signsData.Pulse != null">
      <div class="Signs-header">
       脉搏
      </div>
      <div class="Signs-content">
        <span>{{ $store.getters.signsData.Pulse}} </span> <span v-if=" $store.getters.signsData.Pulse < 50">↓</span><span v-if="$store.getters.signsData.SponRate > 130">↑</span>
      </div>
    </div>
    <h2 v-if="$store.getters.signsData.Pulse == null && $store.getters.signsData.HeartRate == null && $store.getters.signsData.SponRate == null && $store.getters.signsData.Temperature == null">当前患者没有体征数据！！</h2>
  </div>
</template>
<script>
  export default {
    name: 'signs',
    data() {
      return {
      
      }
    },
    
      mounted() {
        //console.log(this.$store.getters.signsData)
    },
     methods: {
       routerLink(e) {
         let sign = e.currentTarget.getAttribute("data-name");
         this.$router.push({
           path: "/physicalSignPage/signsDetails",
           query: { signsIndex: sign},
         });
       }
    }
 
}
</script>
<style scoped>
  #Signs {
    margin-top: 15px;
  }

    #Signs .SignsInfo {
      min-width: 120px;
      height: 120px;
      background-color: #1bace8;
      color: #fff;
      float: left;
      margin-right: 30px;
      border-radius: 5px;
      margin-bottom:15px;
    }

  .Signs-header {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .Signs-content {
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #1293c7;
    border-radius: 0 0 5px 5px;
  }

  .respiratory-rate .Signs-header {
    background-color: #febc05;
    border-radius: 5px 5px 0 0;
  }

  .respiratory-rate .Signs-content {
    background-color: #dda000;
    border-radius: 0 0 5px 5px;
  }

  .heart-rate .Signs-header {
    background-color: #03bc97;
    border-radius: 5px 5px 0 0;
  }

  .heart-rate .Signs-content {
    background-color: #02a784;
    border-radius: 0 0 5px 5px;
  }
  .pulse-rate .Signs-header {
    background-color: #E33F3E;
    border-radius: 5px 5px 0 0;
  }

  .pulse-rate .Signs-content {
    background-color: #D12523;
    border-radius: 0 0 5px 5px;
  }
</style>
